<template>
        <div class="card rdsp-card-view" data-page="troubleRank">
            <div class="card-content rank-content card-content-padding">
                <div id="card-title" class="trouble-title card-header rdsp-card-title">单位警情统计
                    <div class="myblock">
                        <form id="date-type">
                            <select name="dateType" id="dateType"
                                    style="font-size:10px;padding:2px; border: 1px solid;  color:#1b9cd6;"
                                    class="date-type trouble-date-type" @change="getRank">
                                <option value="2">最近一年</option>
                                <option value="1" selected>最近一个月</option>
                                <option value="0">最近24小时</option>
                            </select>
                        </form>
                    </div>
                </div>
                <div class="card-content card-content-padding">
                    <div class="list media-list">
                        <ul id="rankContent">

                        </ul>
                    </div>
                </div>
            </div>
            <!--更多按钮-->
            <a href="/safetyRank//1/" id="troubleRank-more-btn"  class="morelist" data-view=".view-main">
                <i class="iconfont app-icon-down icon-xiala"></i>
            </a>
            <!--建筑消防安全隐患排名模块-->
        </div>
</template>
<style scoped>
    .company_name {
        font-size: 15px;
    }
    .company_address {
        padding-top: 3px;
        font-size: 13px;
    }
    .left_line {
        margin-left: -13px;
    }
    .trouble-li-content {
        position: relative;
    }
    .rank-content {
        padding-bottom: 0px;
    }
    .trouble-title {
        padding-right: 0px;
        padding-left: 0px;
        font-size: 14px;
    }
    .trouble-pic {
        width: 34px;
        height: 34px;
        position: relative;
        text-align: center;
    }
    .trouble-pic1 {
        display: block;
        background-image: url(./img/home/redCircle.png);
        background-repeat: no-repeat;
        background-position: center;
    }
    .trouble-pic2 {
        display: block;
        background-image: url(./img/home/yellowCircle.png);
        background-repeat: no-repeat;
        background-position: center;
    }
    .trouble-pic3 {
        display: block;
        background-image: url(./img/home/blueCircle.png);
        background-repeat: no-repeat;
        background-position: center;
    }
    .trouble-pic4 {
        display: block;
        background-image: url(./img/home/greenCircle.png);
        background-repeat: no-repeat;
        background-position: center;
    }
    #rankContent .item-inner:last-child:after {
        width: 0px;
    }
    #rankContent:before, #rankContent:after {
        height: 0px !important;
        width: 0px !important;
    }
    .md .list ul:before {
        height: 0px !important;
        width: 0px !important;
    }
    .md .list ul:after {
        height: 0px !important;
        width: 0px !important;
    }
</style>
<script>
    return {
        mounted() {
            var self = this;
            self.getRank();//获取排名
        },
        data: function () {
            return {
                id: this.$route.params.id,
            }
        },
        // Component Methods
        methods: {
            getRank: function () {
                var $ = this.$;
                var app = this.$app;
                var router = this.$router;
                var formData = app.form.convertToData('#date-type');
                var dateType = jQuery.trim(formData.dateType);
                $("#troubleRank-more-btn").attr("href","/safetyRank/"+dateType+"/")
                var id_org = "";
                $("#rankContent").empty();
                if (single_Orgid == "") {
                    id_org = userInfor.organizationIds;
                } else {
                    id_org = single_Orgid;
                }
                Dao.troubleRank({
                    userName: userInfor.accountName,
                    deviceId: appKeyObj.deviceId,
                    orgIds: id_org,
                    orgType: 1,
                    time: dateType
                }, function (data) {
                    $("#rankContent").empty();
                    for (var i = 0; i < data.length; i++) {
                        var no = i + 1;
                        if (no <5) {
                            $("#rankContent").append(
                            `<li><a href="#" class="item-content" data-view=".view-main"><div class="item-media trouble-pic`+no+`" style="line-height: 43px;margin-left: -20px;font-size:  12px;text-align:center;color: #ffffff">No.`+no+`</div>
                            <div class="item-inner">
                            <div class="item-title left_line">
                            <div class="company_name " style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 86%;">` + common.transNullundefined(data[i].name) + `</div>
                            <div class="company_address"style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 86%;">` + common.transNullundefined(data[i].address) + `</div></div></div>
                            <div class="company_alarms" style="position: absolute;right: 0px;color: #f5687b;font-size: 19px;top: 20px;">` + data[i].alert + `次</div></a></li>`
                            );
                        }
                        if (no == 4) {
                            break;
                        }
                    }
                });
            },
        },
    }
</script>
